<template>
    <div class="record-list">
      <!--余额提现记录 -->     
       <div v-if="!isDalimond">
          <!--累计-->
          <div class="record-total-l">
              <div class="record-total">
                 <div class="record-t-left">
                     <div class="total-deposit">
                         <span>累计提现</span>
                         <span class="money-num" style="background-image: none;">{{ totalcharm | moneyNum }}</span>
                     </div>
                     <div class="total-deposit total-deposit2">
                         <span>等额</span>
                         <span>￥{{ charmMoney | moneyNum }}</span>
                     </div>
                 </div>
                 <div class="record-t-btn" @click="goDalimond">查看转换钻石</div>
              </div>
          </div>
          <!--record-list-->
          <div class="record-list-box">
             <!--表头-->
             <div class="record-l-head">
                 <div class="item item1">
                     <span class="icon icon1"></span>
                     <span class="text-h">金额</span>
                 </div>
                 <div class="item item2">
                     <span class="icon icon2"></span>
                     <span class="text-h">日期</span>
                 </div>
                 <div class="item item3">
                     <span class="icon icon3"></span>
                     <span class="text-h">状态</span>
                 </div>
             </div>
             <!--每个列表-->
             <div class="record-l-body" v-infinite-scroll="loadMoreC" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                 <div class="record-l-l" v-for="(item,index) in depositList">
                     <div class="item item1">
                         <div>{{ item.money | moneyNum }}</div>
                         <div class="colorr">￥{{ item.rmb | moneyNum }}</div>
                     </div>
                     <div class="item item2" v-text="item.time"></div>
                     <div class="item item3" :class="{'colorg':item.status == 1,'colorre':item.status == 2}">{{ item.status | status }}</div>
                 </div>
                 <p v-text="loadMorecharm" style="text-align: center;padding: 10px 0"></p>
             </div>
          </div>
       </div>
        <!--余额转钻石记录 -->     
       <div v-if="isDalimond">
          <!--累计-->
          <div class="record-total-l">
              <div class="record-total">
                 <div class="record-t-left">
                     <div class="total-deposit">
                         <span>累计转换</span>
                         <span class="money-num" style="background-image: none;">{{ totalCharmDiamond | moneyNum }}</span>
                     </div>
                     <div class="total-deposit total-deposit2">
                         <span>等额</span>
                         <span>{{ totalDiamond | moneyNum }} 钻石</span>
                     </div>
                 </div>
                 <div class="record-t-btn" @click="goDalimond">查看提现记录</div>
              </div>
          </div>
          <!--record-list-->
          <div class="record-list-box">
             <!--表头-->
             <div class="record-l-head">
                 <div class="item item1">
                     <span class="icon icon1"></span>
                     <span class="text-h">提现金额</span>
                 </div>
                 <div class="item item2">
                     <span class="icon icon2"></span>
                     <span class="text-h">提现日期</span>
                 </div>
                 <div class="item item3">
                     <span class="icon icon3"></span>
                     <span class="text-h">状态</span>
                 </div>
             </div>
             <!--每个列表-->
             <div class="record-l-body" v-infinite-scroll="loadMoreC" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                 <div class="record-l-l" v-for="(item,index) in diamondList">
                     <div class="item item1">
                         <div>{{ item.money | moneyNum }}</div>
                         <div class="colorr">{{ item.gold | moneyNum }} 钻石</div>
                     </div>
                     <div class="item item2" v-text="item.add_time"></div>
                     <div class="item item3">成功</div>
                 </div>
                 <p v-text="loadMoredaim" style="text-align: center;padding: 10px 0"></p>
             </div>
          </div>
       </div>
    </div>
</template>
<script>
    //import axios from 'axios'
    export default{
        data:function(){
            return{
                mobile:'',
                password:123,
                depositList:[], //钻石提现记录
                diamondList:[],  //魅力值转钻石记录
                isDalimond : false,//先显示魅力提现
                totalcharm:'', //总魅力值
                charmMoney:'',//魅力值等额
                totalCharmDiamond:'',//魅力转钻石总数
                totalDiamond:'',//等额总钻石
                pageC:1, //魅力提现
                pageD:1, //钻石
                loadMorecharm:'加载更多...',
                loadMoredaim:'加载更多...'
            }
        },
        mounted:function(){
            this.isDalimond = false;
            this.getDepositList(1);
            this.getDiamondList(1);
            this.getCharminfo();
            this.getDiamondinfo();
            this.pageC = 1;
            this.pageD = 1;
        },
        methods:{
            //加载更多
            loadMoreC(){
                if(!this.isDalimond && this.loadMorecharm == '加载更多...'){
                    this.pageC++;
                    this.getDepositList(this.pageC);
                }else if(this.isDalimond && this.loadMoredaim == '加载更多...'){
                    this.pageD++;
                    this.getDiamondList(this.pageD);
                    
                }else{
                    return
                }
            },             
            //余额提现记录
            getDepositList(page){
                 this.get({
                     url:'api/user/withdrawalslist?type=money&page='+page,
                 }).then(response=>{
                     this.depositList = this.depositList.concat(response);
                     if(response.length < 10){
                        this.loadMorecharm = '没有更多数据了'
                     }
                 })
            },
            //余额钻石转换记录
            getDiamondList(page){
                 this.get({
                     url:'api/user/coldrecordlist?type=money&page='+page,
                 }).then(response=>{
                    this.diamondList = this.diamondList.concat(response);
                    if(response.length < 10){
                        this.loadMoredaim = '没有更多数据了'
                     }
                 })              
            },
            //余额提现
            getCharminfo(){
                 this.get({
                     url:'api/user/usercountdata?type=3',
                 }).then(response=>{
                    this.totalcharm = response.up;
                    this.charmMoney = response.down;
                 })                  
            },
            //余额转钻石
            getDiamondinfo(){
                 this.get({
                     url:'api/user/usercountdata?type=4',
                 }).then(response=>{
                    this.totalCharmDiamond = response.up;
                    this.totalDiamond = response.down;
                 })                  
            },
            //查看钻石
            goDalimond(){
              this.isDalimond = !this.isDalimond;
            },
            //查看魅力记录           
        },
        filters:{
            status:function(value){
                if(value == 0){
                   return '正在处理'
                }
                if(value == 1){
                   return '已处理'
                }
                if(value == 2){
                   return '已拒绝'
                }
            },
            moneyNum(value){
                var num = parseInt(value);
                if(num > 9999 ){
                    return (num/10000).toFixed(2)+'万'
                }else{
                    return num
                }
            }
        }
    }
</script>
<style type="text/css">
    @import url('./account.css');
</style>